<template>
  <div>
<!-未完成--->

    <el-table
        ref="multipleTable"
        :data="shopsData"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          prop="name"
          label="店铺名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="legalPerson"
          label="店铺负责人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="creatTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="店铺地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
              size="mini"
              type="danger"
          >进入店铺</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[2, 7, 12, 17]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    新增员工的对话框-->
    <el-dialog title="店铺新增" :visible.sync="editDialogFormVisible"
               @close="clearForm">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="编号" prop="id">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人姓名" prop="ename">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="joindate">
          <el-date-picker
              v-model="form.creatTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="salary">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="salary">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型" prop="deptId">
          <el-select v-model="form.shopTypeId" placeholder="请选择">
            <el-option
                v-for="shoptppe in shoptppe"
                :key="shoptppe.id"
                :label="shoptppe.dname"
                :value="shoptppe.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "admin",
  data(){
    return{
      // 表格数据
      shopsData: [],
      // 当前页码
      curPage:1,
      pageSize:2,
      total:0,
      shopTypeName:'',
      depts:[],
      form:{
        id:'',
        name:'',
        creatTime:'',
        address:'',
        remark:'',
        shopTypeId:''
      },
    }
  },created() {
    this.showByPage()
  },methods:{
// 多条件分页查询
    async showByPage(){
      let res=await this.$axios.get('/shop/queryByPage',{
        params:{
          curPage:this.curPage,
          pageSize:this.pageSize,
          shopTypeName:this.shopTypeName
        }
      })
      this.shopsData=res.data.data
      this.total=res.data.total
    },
    handleSizeChange(val) {

      this.pageSize=val
      this.showByPage()

    },
    handleCurrentChange(val) {

      this.curPage=val
      this.showByPage()
    }
  }

}

</script>

<style scoped>

</style>